<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Demo 4 - Emastic</title>
<link rel="stylesheet" href="malo.css" type="text/css" media="screen, projection">
 <!--[if IE]>
 <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
 <![endif]-->

  <style>
  .main{width:90%;}

  .gridlines {background:url(grid.png);}

 </style>

</head>

<body>
<div class="main gridlines">
<div class="clear">&nbsp;</div>
<div class="hp clearfix"><h1>Logo - Lorem Ipsum</h1>
<p class="note">Nullam sollicitudin convallis velit. </p>
<div class="hp clearfix"><h1>Logo - Lorem Ipsum</h1></div>

</div>


<div  class="dl10">

 <h3>10 <span class="fire">em</span>s</h3>

      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
      </ul>
	        <ul>

        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
      </ul>
	  </div>
<div class="dr15"><h3>15 <span class="fire">em</span>s</h3>

<p>
Mauris fermentum feugiat justo. Quisque urna dolor, sollicitudin id, congue sed, euismod a, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum arcu. Nullam sollicitudin convallis velit. Vestibulum magna lacus, adipiscing vitae, sagittis in, porttitor non, nulla. Nulla purus eros, placerat at, rutrum ac, tincidunt quis, neque. Aliquam gravida tempus nibh. Aenean eleifend facilisis nisi. Aliquam erat volutpat. Fusce ac nisl. Donec malesuada. Suspendisse ut est eget odio congue pellentesque. Morbi varius condimentum erat. Aenean eleifend facilisis nisi. Aliquam erat volutpat. Fusce ac nisl. Donec malesuada.
</p>
</div>
<div class="ml10 fluid mr15">
<h3 class="water">Fluid</h3>
<p>
Mauris fermentum feugiat justo. Quisque urna dolor, sollicitudin id, congue sed, euismod a, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum arcu. Nullam sollicitudin convallis velit. Vestibulum magna lacus, adipiscing vitae, sagittis in, porttitor non, nulla. Nulla purus eros, placerat at, rutrum ac, tincidunt quis, neque. Aliquam gravida tempus nibh. Aenean eleifend facilisis nisi. Aliquam erat volutpat. Fusce ac nisl. Donec malesuada. Suspendisse ut est eget odio congue pellentesque. Morbi varius condimentum erat. Aenean eleifend facilisis nisi. Aliquam erat volutpat. Fusce ac nisl. Donec malesuada. Suspendisse ut est eget odio congue pellentesque. Morbi varius condimentum erat.</p>
<p>
Mauris fermentum feugiat justo. Quisque urna dolor, sollicitudin id, congue sed, euismod a, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum arcu. Nullam sollicitudin convallis velit. Vestibulum magna lacus, adipiscing vitae, sagittis in, porttitor non, nulla. Nulla purus eros, placerat at, rutrum ac, tincidunt quis, neque. Aliquam gravida tempus nibh. Aenean eleifend facilisis nisi. Aliquam erat volutpat. Fusce ac nisl. Donec malesuada. Suspendisse ut est eget odio congue pellentesque. Morbi varius condimentum erat. Aenean eleifend facilisis nisi. Aliquam erat volutpat. Fusce ac nisl. Donec malesuada. </p>
<div class="dp100" style="background-color:#555;height:100px;">100%</div>
<div class="dp100" style="background-color:#222;">

<div class="dp50" style="background-color:#222; height:200px;">50%</div>
<div class="dp50" style="background-color:#222;">
<div class="dp50" style="background-color:#333;height:200px;">25%</div>
<div class="dp50" style="background-color:#444;height:200px;">25%</div>
</div>
</div>
<div class="dp25" style="background-color:#555;height:200px;">25%</div>
<div class="dp25" style="background-color:#555;height:200px;">25%</div>
<div class="dp25" style="background-color:#555;height:200px;">25%</div>
<div class="dp25" style="background-color:#555;height:200px;">25%</div>

<div class="dp100" style="background-color:#333;height:100px;">100%</div>

<p>
Mauris fermentum feugiat justo. Quisque urna dolor, sollicitudin id, congue sed, euismod a, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum arcu. Nullam sollicitudin convallis velit. Vestibulum magna lacus, adipiscing vitae, sagittis in, porttitor non, nulla. Nulla purus eros, placerat at, rutrum ac, tincidunt quis, neque. Aliquam gravida tempus nibh. Aenean eleifend facilisis nisi. Aliquam erat volutpat. Fusce ac nisl. Donec malesuada. Suspendisse ut est eget odio congue pellentesque. Morbi varius condimentum erat. Aenean eleifend facilisis nisi. Aliquam erat volutpat. 
</p>
</div>

<div class="hp oldbook tc">Mauris fermentum feugiat justo. </div>
</div>

</body>
</html>

